import React, { Component } from 'react'
// 使用仓库store 中的数据

import store from '../../stote-thunk';
// 引入store-thunk 文件下的所有的caractions;
import { addaction, jianaction, jianactionAsync, setschoollistActionAsync, setschoollistAction } from '../../stote-thunk/actions/caractions'
import axios from 'axios'
export default class Father extends Component {
    constructor() {
        super()
        this.state = {
            ...store.getState()
        }

        store.subscribe(() => {
            this.setState({
                ...store.getState()
            })
        })
    }
    render() {
        return (
            <div>
                <p>count: {this.state.count}</p>
                <p>
                    <button onClick={() => {
                        this.addcountFn()
                    }}>同步count+1</button>
                    <button onClick={() => {
                        this.jiancountFn()
                    }}>同步count-1</button>
                    <button onClick={() => {
                        this.jiancountAsyncFn()
                    }}>异步count-2</button>
                </p>

                <hr />
                {/* 学校列表 */}
                <ul>
                    {
                        this.state.schoollist.map(item => {
                            return <li key={item.id}>{item.school_name}</li>
                        })
                    }
                </ul>
            </div>
        )
    };
    //  同步+1
    addcountFn() {
        store.dispatch(addaction(1))
    };
    // 同步-1
    jiancountFn() {
        store.dispatch(jianaction(1))
    }
    // 异步-2
    jiancountAsyncFn() {
        //方式1:  在该位置设置定时器或进行数据请求, 进而修改store 数据可行
        // setTimeout(() => {
        //     store.dispatch({ type: '-', payload: 1 })
        // }, 2000)
        //方式2:  派发异步的action
        store.dispatch(jianactionAsync(2))
    };
    componentDidMount() {
        // 派发异步任务设置学校列表
        // store.dispatch(setschoollistActionAsync())
        // 派发同步任务去设置学校列表
        axios.get('https://api.i-lynn.cn/college').then(res => {
            // 派发同步任务setschoollistAction
            store.dispatch(setschoollistAction(res.data.data.list1))
        })

    }
}
